<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="btn">点击</button>
<script>
    // 全局作用域中，this指向window对象
    console.log("this1:", this)
    // 函数调用：
    // 对象方法：this指向调用该方法的对象
    let obj = {
        name: "why",
        showThis: function () {
            console.log("this2:", this)
        }
    }
    obj.showThis()

    // 构造函数：this指向新创建的实例
    function Person() {
        console.log("this3:", this)
    }

    new Person()
    // 箭头函数：this继承自外层作用域
    let showThis1 = () => {
        console.log("this4:", this)
    }
    showThis1()

    let showThis2 = function () {
        console.log("this5:", this)
    }
    showThis2()
    // 事件处理：this指向触发事件的元素
    document.querySelector(".btn").addEventListener("click", function () {
        console.log("this6:", this)
    })

</script>
</body>
</html>
